<template>
  <div class="c-config-add-edit">
    <el-button type="primary" @click="open">
      {{ multLang('btn_new_a') }}
    </el-button>
    <c-dialog
      width="400px"
      :title="multLang(isEdit ? 'btn_edit_a' : 'btn_new_a', info.label)"
      :visible.sync="visible"
      custom-class="c-config-add-edit-dialog"
      @close="close"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        :validate-on-rule-change="false"
      >
        <el-form-item
          v-for="(item, i) in field"
          :key="i"
          :label="multLang(item.langKey, ':')"
          :prop="item.name"
        >
          <template v-if="item.option === 'radio'">
            <el-radio-group v-model="form[item.name]">
              <el-radio
                v-for="option in optionList(item.selectKey)"
                :key="option.value"
                :label="option.value"
              >
                {{ option.label }}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="item.option === 'select'">
            <template v-if="item.isTree">
              <c-cascader
                :value="form[item.name]"
                @input="form[item.name] = $event"
                :clearable="item.name === 'parent_id'"
                :options="optionTree(item.selectKey)"
                :placeholder="
                  item.name === 'parent_id'
                    ? multLang('title_aaad_h')
                    : tplLang('text_choose_a')
                "
              ></c-cascader>
            </template>
            <template v-else>
              <c-select
                :value="form[item.name]"
                @input="form[item.name] = $event"
                :options="optionList(item.selectKey)"
                :clearable="item.name === 'parent_id'"
                :placeholder="
                  item.name === 'parent_id'
                    ? multLang('title_aaad_h')
                    : tplLang('text_choose_a')
                "
              ></c-select>
            </template>
          </template>
          <template v-else>
            <el-input
              v-model="form[item.name]"
              :placeholder="multLang('text_d')"
            ></el-input>
          </template>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="close">
          {{ multLang('btn_cancel_a') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ multLang('btn_sure_a') }}
        </el-button>
      </template>
    </c-dialog>
  </div>
</template>
<script>
import { ObjectCopy } from '@/util'
import { addConfigData, editConfigData } from '@/http/api/v1/config'
export default {
  name: 'CConfigAddEdit',
  components: {},
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    field: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      isEdit: false,
      visible: false,
      form: {},
      data: {},
      back: {}
    }
  },
  computed: {
    rules() {
      const rules = {}
      const hf = item => {
        const { name, option } = item || {}
        if (name === 'parent_id') return

        // rules[name] = {
        //   required: true,
        //   validator: (_, __, cb) => cb(),
        //   trigger: option ? 'change' : 'blur'
        // }

        rules[name] = {
          required: true,
          message: this.multLang('text_d'),
          trigger: option ? 'change' : 'blur'
        }
      }
      this.field.forEach(hf)
      return rules
    }
  },
  watch: {
    field: {
      deep: true,
      handler(val) {
        const form = {}
        if (val && val.length) {
          const hf = item => {
            const { name } = item || {}
            form[name] = name === 'is_use' ? '1' : ''
          }
          this.field.forEach(hf)
        }
        this.back = ObjectCopy(form)
        this.form = ObjectCopy(form)
      }
    }
    // ,info:{
    //   deep:true,
    //   handler(val){
    //     const {parent_id} =val
    //   }
    // }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    open() {
      this.isEdit = false
      this.visible = true
    },
    edit(data) {
      this.isEdit = true
      this.visible = true
      this.data = data
      ObjectCopy(this.form, data)

      this.field.forEach(item => {
        item.name === 'parent_id' &&
          item.selectKey &&
          this.setOption({ key: item.selectKey, option: { id: data.id } })
      })
    },
    close() {
      ObjectCopy(this.form, this.back)
      this.visible = false
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { value } = this.info
          value && (this.isEdit ? this.editData(value) : this.addData(value))
        }
      })
    },
    addData(systemConfigType) {
      addConfigData({ systemConfigType, ...this.form })
        .then(({ code }) => {
          if (code === 200) {
            this.close()
            this.$emit('success')
          } else {
            this.$emit('fail')
          }
        })
        .catch(() => {
          this.$emit('catch')
        })
        .finally(() => {
          this.$emit('finally')
        })
    },
    editData(systemConfigType) {
      const { id } = this.data
      id &&
        editConfigData({ systemConfigType, ...this.form, id })
          .then(({ code }) => {
            if (code === 200) {
              this.close()
              this.$emit('success')
            } else {
              this.$emit('fail')
            }
          })
          .catch(() => {
            this.$emit('catch')
          })
          .finally(() => {
            this.$emit('finally')
          })
    }
  }
}
</script>
<style lang="scss">
.c-config-add-edit {
  &-dialog {
    height: 400px;
    .el-input,
    .el-select {
      width: 240px;
    }
  }
}
</style>
